<template>
	<view class="container">
		<StatusTopBar></StatusTopBar>
		<view class="filter-container">
			<FilterView @tagChange="handleTagChange" />
		</view>
		<!-- 地图区域 -->
		<view class="map-container">
			<MapView ref="mapRef" :baseMap="settingStore.baseMap" :payload="stationFilters"
				:currentRadio="playerStore.currentRadio" :center="weatherStore.center" />
		</view>
		<view class="bottom-container">
			<view class="radio-card-wrapper">
				<RadioCardList ref="cardRef" />
			</view>
			<view class="bottom-player">
				<BottomPlayer />
			</view>
		</view>

		<!-- 功能按钮区域 -->
		<!-- 		<view class="action-buttons">
			<view class="action-btn random-btn" @click="playRandomRadio">
				<uni-icons fontFamily="iconfont" size="24" color="#FFFFFF">{{ icons.random }}</uni-icons>
			</view>
			<view class="action-btn history-btn" @click="showHistory = true">
				<uni-icons fontFamily="iconfont" size="24" color="#FFFFFF">{{ icons.history }}</uni-icons>
			</view>
		</view> -->


	</view>
</template>

<script lang="ts" setup>
import FilterView from '@/components/FilterView/FilterView.vue';
import MapView from '@/components/MapView/MapView.vue';
import RadioCardList from '@/components/RadioCardList/RadioCardList.vue';
import { usePlayerStore } from '@/stores/usePlayerStore';
import { useSettingStore } from '@/stores/useSettingStore';
import { useWeatherStore } from '@/stores/useWeatherStore';
import { ref } from 'vue';
const mapRef = ref(null);
const cardRef = ref(null);
const stationFilters = ref({});
const playerStore = usePlayerStore();
const settingStore = useSettingStore();
const weatherStore = useWeatherStore();
const handleTagChange = (payload: { type: string, tags: string[] }) => {
	console.log('标签切换');
	stationFilters.value = payload;
}

</script>

<style scoped>
page {
	height: 100%;
}

.container {
	position: relative;
	height: 100%;
	width: 100%;
	background: linear-gradient(135deg, #0B0B2B 0%, #1A1A4B 100%);
}

/* 悬浮容器，让 FilterView 置顶显示 */
.filter-container {
	position: fixed;
	left: 32rpx;
	right: 32rpx;
	margin-top: 32rpx;

	/* position: absolute;
	top: 30rpx;
	left: 32rpx;
	right: 32rpx; */
	z-index: 20;
	pointer-events: auto;
	/* 保证点击不被吞掉 */
}

.bottom-container {
	/* 保证在页面底部但不冲突地图层 */
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 11;
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	/* 控件之间距离 */
	/* padding: 0 32rpx; */
}

.radio-card-wrapper {
	width: 100%;
	padding: 0 32rpx;
	overflow-x: scroll;
}

.bottom-player {
	width: 100%;
}


/* 地图区域样式 */
.map-container {
	position: fixed;
	height: 100%;
	width: 100%;
}

/* 功能按钮样式 */
.action-buttons {
	position: absolute;
	right: 30rpx;
	bottom: 280rpx;
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	z-index: 10;
}

.action-btn {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
}

.random-btn {
	background-color: #FF6B81;
}

.history-btn {
	background-color: #70A1FF;
}
</style>